import React from "react"
import {connect} from 'react-redux';
// import ChangInputValue from './store/action'
import actionMap from './store/action'
class TodoList extends React.Component {
    constructor(props){
        super(props)
        // this.state=store.getState();
        console.log(this.props)
    }
    render() {
        const {inputValue,changeInputValue,handleClick,list} = this.props
        console.log(inputValue)
        return (
            <div>
                <div>
                    {/*//this.props.changeInputValue 调用store的changeInputValue方法*/}
                    <input value={inputValue} onChange={changeInputValue}/>
                    <button onClick={handleClick}>提交</button>
                </div>
                <ul>
                    {
                        list.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                    }
                </ul>

            </div>
        )
    }

}

const mapStateToProps = (state) =>{ //store里的state映射到组件的 props中
    return{
        inputValue: state.inputValue,
        list:state.list
    }
}

const mapDispatchToProps = (dispatch)=>{ // 通过组件props的属性调用 store的dispath方法
    return{
// 组件的inputValue,与store.state.inputValue 做链接
        changeInputValue(e){
            const action={
                type:actionMap.changInputValue,
                value:e.target.value
            };
            // console.log(action)
            dispatch(action) // 触发store中的方法
            // console.log(e.target.value) // 获取input的值
        },


        handleClick(){
            const action={
                type:actionMap.additem
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList) // 与store做链接